<template>
<view class="page-backgroud" :style="{'overflow':show?'visible':'scroll'}">
	<!-- 顶部分类导航 -->
	<view class="tab_wrap">
		<scroll-view :scroll-x="true" class="top_wrap"  :style="{'background-color' : options.top_backgroundcolor}" :scroll-into-view="tabCurrent">
			<view 
			:class="defaultIndex===index?'top_item_active' :'top_item'" 
			:style="{'color':defaultIndex===index?  options.top_itemselectcolor:  options.top_itemcolor }"
			v-for="(item,index) in tabItem" :key="index" @click="handleTabItem(index);">
				{{item.name}}
			</view>
		</scroll-view>
	</view>
		<swiper class="row-50-width" :current="currentTab" @change="swiperChange">
		<swiper-item style="overflow: scroll;" v-for="(item,index) in tabItem" :key="index">
		<!-- 产品 -->
		<view class="left-right-half-box" v-if="isGetData" v-for="(item, index) in productList" 
			:key="item.id"  @click="appointProduct(item)">
			<view class="left-right-inbox">
				<image style="width: 100%;height: 170px;"  :src="item.url"></image>
				<view class="row-width">
					<text class="massage-text">{{item.name}}</text>
				</view>
				<view class="row-width">
					<text class="blue-title">价格：</text>
					<text class="address-phone-text cut-long-text">{{item.price}}</text>
				</view>
				<view class="row-width">
					<text class="blue-title">描述：</text>
					<text class="address-phone-text">{{item.description}}</text>
					<text class="address-phone-text"></text>
				</view>
				<view class="row-width">
					<text class="blue-title">状态：</text>
					<text v-if="item.status === 0" class="address-phone-text cut-long-text">未预约</text>
					<text v-if="item.status === 1" class="address-phone-text cut-long-text" style="color: #CE1229;">已预约</text>
				</view>
				<view class="row-width">
					<text class="blue-title">预约数量：</text>
					<text v-if="item.buycount === 99" class="address-phone-text cut-long-text">0</text>
					<text v-if="item.buycount !== 99" class="address-phone-text cut-long-text" style="color: #CE1229;">{{item.buycount}}</text>
				</view>
				<view class="row-width">
					<text class="blue-title">预约总数：</text>
					<text class="address-phone-text cut-long-text">{{item.needProductCount}}</text>
				</view>
			</view>
		</view>
		<!-- 当没有产品时 -->
		<noDataPage :message='message' v-if="!isGetData"></noDataPage>
		</swiper-item>
		</swiper>
		
		
	<!-- 模态框 -->
	<view v-if="isShowModal">
			<view class="masking" v-if="showMasking" style="background-color:rgba(0,0,0,.6);"></view>
			<view class="model-wraper">
				<view class="modal-title">
					{{modalWords}}
				</view>
				<input-number :myNum="currentNum" min="0" max="99" ref="inputNumber" @changeNum="changeNum"></input-number>
				<view>
					<view class="btn cancel" style="color: #666;" @click="handleCancel()">取消</view>
					<view class="btn confirm" style="color: #5999FF;" @click="handleConfirm()">确定</view>
				</view>
			</view>
		</view>
</view>
</template>

<script>
	import {searchAllProduct,appointProduct, updateAppointProduct, cancelProduct} from '@/common/api/product.js'
	import {inputNumber} from '@/component/inputNumber.vue'
	import {queryProductCategory} from '@/common/api/product.js'
		export default {
			data() {
				return {
					isGetData: false, // 没有医生出诊信息时为false
					message: '产品', 
					//当前选择的分类id
					currentCategoryId:'',
					//当前分类导航选择的分类下标
					defaultIndex: 0,
					options:{
						top_backgroundcolor:'#ffffff',
						top_itemcolor:'#000000',
						top_itemselectcolor:'#00aaff'
					},
					tabItem: [],
					currentTab: 0,
					tabCurrent: 'tabNum1',
					show:false,
					status:'',   //记录当前点击预约商品是否预约
					visitProductId:'',//当前预约的产品订单id
					currentId:0,
					currentNum:1,//当前商品数量
					modalWords:'',
					myNum:{
						type:Number,
						default:1 
					},
					min:{
					    type:Number
					},
					max:{
					    type:Number
					},
					isShowModal:false,
					showMasking:false,
					productList: [],
				}
			},
			components:{
				inputNumber
			},
			    // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
				onShareAppMessage(res) {
				    return {
				      title: '晓恩小儿推拿产品预约',
				      path: 'pages/home/appointmentHome/product/product',
					  imageUrl: 'https://yf-myblog.oss-cn-shenzhen.aliyuncs.com/public/blogArticles/2023-05-10/1683678797.png'
				    }
				  },
				  // 自定义页面的分享到朋友圈
				onShareTimeline(res) {
					return {
						title: '晓恩小儿推拿产品预约',
						path: 'pages/home/appointmentHome/product/product',
						imageUrl: 'https://yf-myblog.oss-cn-shenzhen.aliyuncs.com/public/blogArticles/2023-05-10/1683678797.png'
					}
				},

			methods: {
				swiperChange(e) {
					console.log("滑动")
					console.log(22,e.detail.current)
					let index = e.detail.current
					this.handleTabItem(index)
				},
				handleTabItem(index){
					this.defaultIndex = index
					this.$emit('tabItemClick',{index:this.tabItem[index].id});
					this.currentCategoryId = this.tabItem[index].id
					this.productList = []
					this.getAllProduct(this.currentCategoryId)
				},
				// 下拉刷新
				onPullDownRefresh() {
					// if(this.show === false){
					// 	return;
					// }
					let that = this
					setTimeout(function() {
							that.getAllProduct(that.currentCategoryId)
							uni.showToast({
								title: '刷新成功',
								icon: 'success'
							})
							uni.stopPullDownRefresh();
					}, 1000);
				},
				changeNum(num){
					this.currentNum = num
				},
				showModal(id,words,num) {
					this.modalWords = words
					this.currentNum = num
					this.isShowModal = true
					this.showMasking = true
					this.currentId = id
				},
				handleCancel() {
					//this.show = true;
					this.isShowModal = false;
				},
				handleConfirm() {
					//this.show = true;
					let that = this
					this.isShowModal = false
					console.log('当前status',this.status)
					console.log('当前currentNum',this.currentNum)
					if(this.status === 1){   //当前商品已预约
						if(this.currentNum === 0){//如果修改当前产品数量为0，则直接取消产品
							cancelProduct(this.visitProductId).then(res =>{
								if(res.data.code === 200){
									that.getAllProduct(this.currentCategoryId)
									uni.showToast({
										title: '修改成功',
										icon: 'success'
									})
								}
							}).catch(() =>{
									uni.showToast({
										title: '预约失败',
										icon: 'error'
									})
							})
						}else{
							updateAppointProduct(this.currentId,this.currentNum).then(res => {
								if(res.data.code === 200){
									that.getAllProduct(this.currentCategoryId)
									uni.showToast({
										title: '修改成功',
										icon: 'success'
									})
								}
							}).catch(() =>{
									uni.showToast({
										title: '预约失败',
										icon: 'error'
									})
							})
						}
					}else if(this.status === 0 && this.currentNum !== 0){ //当前商品未预约
						appointProduct(this.currentId,this.currentNum).then(res => {
							if(res.data.code === 200){
								that.getAllProduct(this.currentCategoryId)
								uni.showToast({
									title: '预约成功',
									icon: 'success'
								})
							}
						}).catch(() =>{
							uni.showToast({
								title: '预约失败',
								icon: 'error'
							})
						})
					}
				},
				// 点击预约产品
				appointProduct: function(item){
					// this.show = false;
					this.status = item.status //记录当前点击预约商品是否预约
					if(item.status === 0){
						this.showModal(item.id,'确认预约数量',1)
					}else{
						this.visitProductId = item.visitProductId
						this.showModal(item.id,'修改预约数量',item.buycount)
					}
				},
				// 获取产品预约记录
				getProductAppoint: function(){
					queryAppointProduct().then(res=>{
						if(res.data.code === 200){
							that.appointProductList = res.data.data.records
							uni.hideLoading()
						}
					})
				},
				// 获取产品分类
				getProductCategory:function(){
					let that = this
					queryProductCategory().then(res => {
						if(res.data.code === 200){
							res.data.data.forEach(function(item,index){
								that.tabItem.push({
									id:item.id,
									name:item.name
								})
							})
							
						}
						that.currentCategoryId = that.tabItem[0].id
						that.getAllProduct(that.tabItem[0].id);
					})
				},
				// 获取所有预约产品
				getAllProduct: function(id){
					let that = this
					searchAllProduct(id,1,50).then(res => {
						if (res.data.code === 200) {
							const data = res.data.data.records
							if(data.length === 0 || data === null){
								that.isGetData = false;
							}else{
								that.isGetData = true;
								that.productList = data
							}
							
						}
					}).catch(() => {
						uni.showToast({
							title: '获取商品失败',
							icon: 'error'
						})
					})
				}
			},
			onLoad(){
				this.getProductCategory()
			}
		}
</script>

<style lang="scss">
	@import '@/common/scss/common.scss';
	page {
		background: #F2F2F2;
		position: relative;
		overflow: scroll;
	}
	.swiper-box-list {
			width: 100%;
			padding-top: 200rpx;
			flex:1;
			background-color: #FFFFFF;
			.swiper-topic-list {
			     width: 100%;
			 }
		}
	// 下划线
	.underline::after{
		position: absolute;
		content: "";
		left: 10px;
		bottom: 30%;
		width: 90rpx;
		height: 3px;
		background: #5af;
		cursor: pointer;
	}
	// 顶部分类导航
	.tab_wrap{
		width: 100%;
		height: 100rpx;
		::-webkit-scrollbar {
		  width: 0;
		  height: 0;
		  color: transparent;
		}
		.top_wrap {
			position: fixed;
			z-index: 999;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-evenly;
			white-space: nowrap;
		
			.top_item {
				//margin: 0 25rpx;
				height: 100%;
				width: 20%;
				text-align: center;
				line-height: 90rpx;
				display: inline-block;
				font-size: 30rpx;
				font-weight: 400;
			}
		
			.top_item_active {
				height: 97%;
				width: 20%;
				background: #F2F2F2;
				border-bottom: 2px solid #5af;
				//margin: 0 25rpx;
				text-align: center;
				line-height: 90rpx;
				display: inline-block;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
	// 模态框
	.masking {
			height: 100%;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
	
		.model-wraper {
			width: 600rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: fixed;
			z-index: 1000;
			top: 45%;
			left: 50%;
			margin-top: -161rpx;
			margin-left: -300rpx;
			box-shadow: #dcdcdc 0px 0px 10rpx;
		}
	
		.modal-title {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #666;
		}
	
		.modal-body {
			padding: 30rpx 30rpx 80rpx 30rpx;
		}
	
		.btn {
			width: 300rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			float: left;
			border-top: 1rpx solid #ddd;
		}
	
		.btn.cancel {
			width: 299rpx;
			border-right: 1rpx solid #dcdcdc;
		}

	
	// 先将页面分成左右排列
	.row-50-width {
		width: 100%;
		height: 100%;
		@include flex-direction(row);
	
		// 将页面分成左右两半
		.left-right-half-box {
			width: 50%;
			//@include flex-direction(column);
			float: left;
			// 每个小块的样式
			.left-right-inbox {
				@include width-margin(91%, 355px);
				background: #FFFFFF;
				//@include flex-direction(column);
				border: 1px solid #BBBBBB;
				border-radius: 8px;
				padding: 10rpx;
				margin-top: 20rpx;
	
				.row-width {
					width: 100%;
					height: auto;
					//@include flex-direction(row);
					align-items: center;
	
					.icon {
						@include icon-size(50rpx, 50rpx);
						margin-right: 10rpx;
					}
	
					.massage-text {
						@include font-style(15px, bold, #000000);
					}
	
					.blue-title {
						width: 30%;
						@include font-style(16px, 400, $major-color);
					}
	
					.address-phone-text {
						width: 68%;
						@include font-style(16px, 400, $gray-color);
					}
				}
			}
		}
	}
</style>
